<script setup>
  import { inject, ref } from "vue";
  import useWebsiteStore from "../store/websiteStore";

  const websiteStore = useWebsiteStore()
  const { isShowDialog, setIsShowDialog }= inject('dialog-show')
  const url = ref('http://www.baidu.com')
  const isSubmit = ref(false)

  const handleClickAdd = async () =>{
    isSubmit.value = true

    const res = await myApi.sendUrl(url.value)
    if(res.msg){
      myApi.alert(res.msg)
    }else{
      websiteStore.add(res)
    }
    
    websiteStore.name = "小白"

    isSubmit.value = false
    setIsShowDialog(false)
  }
</script>

<template>
  <div class="dialog-wrap" v-show="isShowDialog">
    <div class="content">
      <div class="input">
        <input type="text" v-model="url" placeholder="请输入网址..."/>
      </div>
      <div class="btns">
        <button @click="handleClickAdd()" :disabled="isSubmit">添加 {{ websiteStore.name }}</button>
        <button @click="()=>{ setIsShowDialog(false) }" :disabled="isSubmit">取消</button>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
 .dialog-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    .content {
      width: 100%;
      padding: 0 20px;
      input{
        height: 30px;
        width: 100%;
        outline: none;
        margin-bottom: 10px;
        font-size: 12px;
      }
      .btns{
        button {
          height: 30px;
          margin-right: 10px;
          font-size: 12px;
          padding: 0 20px;
        }
      }
    }
  }
</style>
